<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

        <el-menu
          class="el-menu-vertical-demo"
          unique-opened
          text-color="#333333"
          active-text-color="orange"
          :router="true">
          <!--有二级菜单的使用el-submenu 没有二级菜单的使用el-menu-item-->
          <template v-for="menu in menuData">
            <!--因为index必须是一个字符串  我的数据库里面使用的是int类型所以在这里需要加上‘’-->
            <el-submenu  :index="menu.mid+''" v-if="menu.childrenMenus.length>0">
              <template slot="title"  ><i ></i>{{menu.mname}}</template>
              <el-menu-item-group v-for="cmenu in menu.childrenMenus" :key="cmenu.mid">
                <el-menu-item  v-hasMenus="cmenu.mcode" :index="cmenu.murl"><span>{{cmenu.mname}}</span></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--0 默认是 ‘’-->
            <el-menu-item v-hasMenus="menu.mcode" :index="menu.url" v-else-if="menu.pid!=null">
              <template slot="title"  ><i :class="menu.icon"></i>{{menu.name}}</template>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>

      <el-main>
        <!--存放组件的内容-->
        <router-view></router-view>
      </el-main>

    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        menuData:[]
      }
    },
    methods:{

    },
    mounted() {
      // 查询出所有的菜单信息
      this.$axios({
        method:'get',
        url:'t-menu/getAllMenu'
      }).then(r=>{
        alert(JSON.stringify(r.data.data))
        this.menuData = r.data.data;
      })
    }
  };
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
